<template>
  <view class="content">
    <up-navbar title="发现课程" @rightClick="backClick" :autoBack="true">
    </up-navbar>
    <view class="search-box">
      <up-search
        v-model="searchValue"
        :show-action="true"
        placeholder="搜索课程"
        shape="square"
        @search="searchCourse"
        clearable
      ></up-search>
    </view>
    <up-list>
      <up-list-item v-for="(item, index) in courseList" :key="index">
        <view class="my-card">
          <view class="my-card-info">
            <view>
              <view class="teacher-info">
                <up-avatar :size="24" :src="item.teacher.avatar"></up-avatar>
                <text class="teacher-name">{{ item.teacher.name }}</text>
              </view>
              <view class="my-card-info-title">{{ item.name }}</view>
              <view class="my-card-info-desc">{{ item.desc }}</view>
            </view>
            <view class="fill"></view>
            <up-image
              :src="item.cover"
              class="my-card-info-cover"
              mode="aspectFill"
              :width="100"
              :height="80"
              :radius="10"
              fit="cover"
            ></up-image>
          </view>
        </view>
      </up-list-item>
    </up-list>
    <my-tabbar></my-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      courseList: [
        {
          id: 1,
          name: "Web前端开发进阶",
          desc: "掌握现代前端框架与工程化开发",
          cover: "https://picsum.photos/seed/course1/400/225",
          teacher: {
            name: "张教授",
            avatar: "https://picsum.photos/seed/teacher1/100/100",
          },
        },
        {
          id: 2,
          name: "Python数据分析",
          desc: "从基础到实战，全面掌握数据处理",
          cover: "https://picsum.photos/seed/course2/400/225",
          teacher: {
            name: "李老师",
            avatar: "/static/Staff.png",
          },
        },
        {
          id: 3,
          name: "Java高级编程",
          desc: "深入理解Java核心概念与设计模式",
          cover: "https://picsum.photos/seed/course3/400/225",
          teacher: {
            name: "王讲师",
            avatar: "https://picsum.photos/seed/teacher3/100/100",
          },
        },
        {
          id: 4,
          name: "UI/UX设计入门",
          desc: "学习设计原则与用户体验优化",
          cover: "https://picsum.photos/seed/course4/400/225",
          teacher: {
            name: "刘设计师",
            avatar: "https://picsum.photos/seed/teacher4/100/100",
          },
        },
      ],
    };
  },
  methods: {
    backClick() {
      uni.navigateBack();
    },
    searchCourse() {
      // 实际项目中这里应该调用API进行搜索
      console.log("搜索课程:", this.searchValue);
      // 模拟搜索结果
      if (this.searchValue) {
        const filteredCourses = this.courseList.filter(
          (course) =>
            course.name.includes(this.searchValue) ||
            course.desc.includes(this.searchValue) ||
            course.teacher.name.includes(this.searchValue)
        );
        this.courseList = filteredCourses;
      } else {
        // 恢复原始列表
        this.getCourseList();
      }
    },
    getCourseList() {
      // 实际项目中这里应该调用API获取课程列表
      console.log("获取课程列表");
      // 这里使用初始化数据作为示例
    },
  },
  onLoad() {
    this.getCourseList();
  },
};
</script>

<style lang="scss">
.teacher-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #888;
}

.teacher-name {
  margin-left: 6px;
}
</style>    